Top React Hooks — Lifecycle and Toggles

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Hooks Lib

React Hooks Lib is a library that has many reusable React hooks.

To install it, we can run:

npm i react-hooks-lib --save

Then we can use the hooks that come with the library.

Then we can use the useDidUpdate hook.

This is similar to the componentDidUpdate method in React class components.

It runs only on updates.

For example, we can use it by writing:

import React from "react";
import { useDidUpdate, useCounter } from "react-hooks-lib";

export default function App() {
  const { count, inc } = useCounter(0);
  useDidUpdate(() => {
    console.log("update");
  });
  return (
    <div>
      {`count: ${count}`}
      <button onClick={() => inc(1)}>increment</button>
    </div>
  );
}

We use the useCounter hook to create a counter state.

We use the inc function to increment it.

And count has the state.

useDidUpdate ‘s callback runs when count updates.

The useMergeState hook lets us create a state setter function that works like the setState method of React class components.

For instance, we can use it by writing:

import React from "react";
import { useMergeState } from "react-hooks-lib";

export default function App() {
  const { state, set } = useMergeState({ name: "james", age: 1 });

  return (
    <div>
      <button onClick={() => set(({ age }) => ({ age: age + 1 }))}>
        increment age
      </button>
      {JSON.stringify(state)}
    </div>
  );
}

useMergeState takes the initial state as the argument.

It returns the state with the state’s value.

set lets us set the stare by passing in an object.

The object will be merged with the existing state value.

We pass a function into it which has the current state object as the parameter, and we return the new state object as the value.

The useCounter hook lets us create a number state that we can update.

For instance, we can write:

import React from "react";
import { useCounter } from "react-hooks-lib";

export default function App() {
  const { count, inc, dec, reset } = useCounter(1);

  return (
    <div>
      {count}
      <button onClick={() => inc(1)}>increment</button>
      <button onClick={() => dec(1)}>decrement</button>
      <button onClick={reset}>reset</button>
    </div>
  );
}

to create a component with a number state count with the useCounter hook.

The argument is the initial value of count .

inc increments count .

dec increments count .

reset resets count to the initial value.

The useToggle hook creates a boolean state and lets us toggle it between true or false .

To use it, we write:

import React from "react";
import { useToggle } from "react-hooks-lib";

export default function App() {
  const { on, toggle, reset } = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>toggle</button>
      <button onClick={reset}>reset</button>
      <p>{String(on)}</p>
    </div>
  );
}

We use the useToggle hook with initial value as the argument.

The on property has the toggle state’s value.

toggle lets us toggle the value of on .

And reset resets on to the initial value.

Conclusion

React Hooks Lib comes with hooks that imitates lifecycle methods of class components.

It also comes with hooks to let us manipulate various kinds of states more easily.